<template>
	<div>
		<div id="base" class="">
			<!-- 筛选查询 -->
			<div id="u3902" class="ax_default _默认样式">
				<div id="u3902_div" class=""></div>
			</div>

			<!-- 筛选查询 -->
			<div id="u3903" class="ax_default _默认样式">
				<div id="u3903_div" class=""></div>
				<div id="u3903_text" class="text">
					<p style="font-size: 18px">
						<i class="el-icon-search" />
						<span style="font-family: 'Arial Normal', 'Arial'; font-weight: 400; font-size: 12px"></span>
						<span style="font-family: '微软雅黑'; font-weight: 400; font-size: 12px">筛选查询</span>
					</p>
				</div>
			</div>

			<!-- 筛选查询 -->
			<div id="u3905" class="ax_default" data-left="837" data-top="130" data-width="244" data-height="30">
				<!-- 收起筛选-->
				<div id="u3906" class="ax_default _默认样式">
					<div id="u3906_div" class=""></div>
					<div id="u3906_text" class="text">
						<p>
							<i class="el-icon-arrow-up" />
							<span style="font-family: 'Arial Normal', 'Arial'; font-weight: 400"></span>
							<span style="font-family: '微软雅黑'; font-weight: 400">收起筛选</span>
						</p>
					</div>
				</div>

				<!-- 高级检索 -->
				<div id="u3907" class="ax_default _默认样式">
					<div id="u3907_div" class=""></div>
					<div id="u3907_text" class="text">
						<p><span>高级检索</span></p>
					</div>
				</div>

				<!--查询结果 -->
				<div id="u3908" class="ax_default _默认样式">
					<div id="u3908_div" class=""></div>
					<div id="u3908_text" class="text">
						<p><span>查询结果</span></p>
					</div>
				</div>
			</div>

			<!-- 全部订单 -->

			<el-button class="anniu" :type="queryInfo.status == null ? 'primary' : ''" @click="selectByStatus()">
				全部订单(
				<span style="color: #f04844">{{ this.statusCount.count5 }}</span>
				<span>)</span>
			</el-button>

			<el-button class="anniu" :type="queryInfo.status == 0 ? 'primary' : ''" @click="selectByStatus(0)">
				待付款(
				<span style="color: #f04844">{{ this.statusCount.count }}</span>
				<span>)</span>
			</el-button>
			<el-button class="anniu" :type="queryInfo.status == 1 ? 'primary' : ''" @click="selectByStatus(1)">
				待发货(
				<span style="color: #f04844">{{ this.statusCount.count1 }}</span>
				<span>)</span>
			</el-button>
			<el-button class="anniu" :type="queryInfo.status == 2 ? 'primary' : ''" @click="selectByStatus(2)">
				已发货(
				<span style="color: #f04844">{{ this.statusCount.count2 }}</span>
				<span>)</span>
			</el-button>
			<el-button class="anniu" :type="queryInfo.status == 3 ? 'primary' : ''" @click="selectByStatus(3)">
				已完成(
				<span style="color: #f04844">{{ this.statusCount.count3 }}</span>
				<span>)</span>
			</el-button>
			<el-button class="anniu" :type="queryInfo.status == 4 ? 'primary' : ''" @click="selectByStatus(4)">
				已关闭(
				<span style="color: #f04844">{{ this.statusCount.count4 }}</span>
				<span>)</span>
			</el-button>

			<!-- 数据列表 -->
			<div id="u3922" class="ax_default _默认样式">
				<div id="u3922_div" class=""></div>
				<div id="u3922_text" class="text">
					<p style="font-size: 18px">
						<i class="el-icon-s-grid" />
						<span style="font-family: 'Arial Normal', 'Arial'; font-weight: 400; font-size: 12px"></span>
						<span style="font-family: '微软雅黑'; font-weight: 400; font-size: 12px">数据列表</span>
					</p>
				</div>
			</div>

			<!-- 批量发货 -->
			<div id="u4008" class="ax_default _默认样式">
				<div id="u4008_div" class=""></div>
				<div id="u4008_text" class="text">
					<p><span>批量发货</span></p>
				</div>
			</div>

			<!-- 导出订单 -->
			<div id="u4009" class="ax_default _默认样式">
				<div id="u4009_div" class=""></div>
				<div id="u4009_text" class="text">
					<p><span>导出订单</span></p>
				</div>
			</div>

			<!-- 显示条数-->
			<div id="u4010" class="ax_default" data-left="875" data-top="258" data-width="99" data-height="30">
				<!-- 显示条数 -->
				<div id="u4011" class="ax_default _默认样式">
					<div id="u4011_div" class=""></div>
					<div id="u4011_text" class="text">
						<p><span>显示条数</span></p>
					</div>
				</div>

				<!-- Unnamed (Shape) -->
				<div id="u4012" class="ax_default _默认样式">
					<img id="u4012_img" class="img" src="../../assets/images/订单列表/u1037.png" />
				</div>
			</div>

			<!-- 排序方式-->
			<div id="u4013" class="ax_default" data-left="981" data-top="258" data-width="99" data-height="30">
				<!-- 排序方式 -->
				<div id="u4014" class="ax_default _默认样式">
					<div id="u4014_div" class=""></div>
					<div id="u4014_text" class="text">
						<p><span>排序方式</span></p>
					</div>
				</div>

				<!-- Unnamed (Shape) -->
				<div id="u4015" class="ax_default _默认样式">
					<img id="u4015_img" class="img" src="../../assets/images/订单列表/u1037.png" />
				</div>
			</div>
			<!-- 打印发货单 -->
			<div id="u4018" class="ax_default _默认样式">
				<div id="u4018_div" class=""></div>
				<div id="u4018_text" class="text">
					<p><span>打印发货单</span></p>
				</div>
			</div>

			<!-- 合并订单 -->
			<div id="u4020" class="ax_default _默认样式">
				<div id="u4020_div" class=""></div>
				<div id="u4020_text" class="text">
					<p><span>合并订单</span></p>
				</div>
			</div>

			<!-- 拆分订单-->
			<div id="u4077" class="ax_default _默认样式">
				<div id="u4077_div" class=""></div>
				<div id="u4077_text" class="text">
					<p><span>拆分订单</span></p>
				</div>
			</div>
		</div>

		<!--查询表单  :inline横向表单-->
		<el-form :inline="true" class="chaxunbiaodan">
			<el-form-item label="订单编号：">
				<el-input v-model="queryInfo.orderCode" label-width="50px"></el-input>
			</el-form-item>
			<el-form-item label="用户账号：">
				<el-input v-model="queryInfo.userName" label-width="50px"></el-input>
			</el-form-item>

			<el-form-item label="订单状态：">
				<!-- clearable删除已选的值 -->
				<el-select v-model="queryInfo.status" clearable placeholder="审核状态">
					<el-option value="0" label="待支付" />
					<el-option value="1" label="待发货" />
					<el-option value="2" label="已发货" />
					<el-option value="3" label="已完成" />
					<el-option value="4" label="已关闭" />
				</el-select>
			</el-form-item>

			<!-- <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryInfo.joinDateBegin"
            placeholder="开始时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item> -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="getOrderList()">查询</el-button>
				<el-button type="default" @click="resetData()">清空</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格 -->
		<el-table
			:data="orderList"
			border
			stripe
			row-class-name="myClassList"
			:header-cell-style="{
				background: '#f8f8f9',
				color: '#606266',
				fontSize: '13px',
				fontFamily: '微软雅黑 Bold, 微软雅黑 Regular, 微软雅黑',
				fontWeight: 700
			}"
		>
			<el-table-column label="序号" width="50">
				<template slot-scope="scope">
					{{ (queryInfo.current - 1) * queryInfo.size + scope.$index + 1 }}
				</template>
			</el-table-column>
			<el-table-column label="订单编号" width="150" align="center">
				<template slot-scope="scope">
					{{ scope.row.orderCode }}
				</template>
			</el-table-column>
			<el-table-column label="用户账号" width="121" align="center">
				<template slot-scope="scope">
					{{ scope.row.userRsp.userName }}
				</template>
			</el-table-column>
			<el-table-column label="订单金额" width="110" align="center">
				<template slot-scope="scope">¥{{ scope.row.sumPrice }}</template>
			</el-table-column>
			<el-table-column label="支付类型" width="95" align="center">
				<template slot-scope="scope">
					<el-tag type="warning">{{ scope.row.paytype === 0 ? '在线支付' : '货到付款' }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="支付方式" width="95" align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.paytype2 === 0">微信</el-tag>
					<el-tag type="success" v-if="scope.row.paytype2 === 1">银行卡</el-tag>
					<el-tag type="success" v-if="scope.row.paytype2 === 2">钱包</el-tag>
					<el-tag type="success" v-if="scope.row.paytype2 === 3">支付宝</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="订单状态" width="95" align="center">
				<template slot-scope="scope">
					<p v-if="scope.row.status === 0">待支付</p>
					<p v-if="scope.row.status === 1">待发货</p>
					<p v-if="scope.row.status === 2">已发货</p>
					<p v-if="scope.row.status === 3">已完成</p>
					<p v-if="scope.row.status === 4">已关闭</p>
				</template>
			</el-table-column>
			<el-table-column label="提交时间" width="189" align="center">
				<template slot-scope="scope">
					{{ scope.row.createTime }}
				</template>
			</el-table-column>

			<el-table-column label="操作" width="255" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" icon="el-icon-edit" @click="viewOrder">查看订单</el-button>
					<el-button v-if="scope.row.status == 0" type="warning" size="mini" icon="el-icon-folder-checked" @click="publishById(scope.row.id, 1)">关闭订单</el-button>
					<el-button v-if="scope.row.status == 1" type="warning" size="mini" icon="el-icon-folder-checked" @click="showDialog(scope.row)">订单发货</el-button>
					<el-button v-if="scope.row.status == 2 || scope.row.status == 3" type="warning" size="mini" icon="el-icon-folder-checked" @click="publishById(scope.row.id, 1)">订单跟踪</el-button>
					<el-button v-if="scope.row.status == 4" type="warning" size="mini" icon="el-icon-folder-checked" @click="publishById(scope.row.id, 0)">删除订单</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页区域 -->
		<!--  changeCurrentPage()不能加括号，应该下面函数有参数，这里不给值默认会传undefined -->
		<!--
         @size-change 监听 pagesize改变的事件 （选择显示多少条数据）
         @current-change  currentPage当前页数 改变时会触发 下一页
          current-page当前页数
          page-sizes 每页显示个数选择器的选项设置
          total总条目数 page-size每页显示条目个数默认10 prev上一页 pager页数 next下一页
          sizes选择器
         -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[5, 10, 20]" :page-size="queryInfo.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

		<!-- 订单发货的对话框 -->
		<el-dialog title="确认发货地址" :visible.sync="dialogVisible" width="50%" @close="editDialogClosed">
			<el-form :model="mateData" :rules="editFormRules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
				<el-form-item label="收货人姓名" prop="name">
					<el-input v-model="mateData.name" disabled></el-input>
				</el-form-item>
				<el-form-item label="收货人手机" prop="phone">
					<el-input v-model="mateData.phone" disabled></el-input>
				</el-form-item>
				<el-form-item label="收货地址" prop="address">
					<el-input v-model="mateData.address" disabled></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="commit(mateData.orderId)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import '../../assets/css/styles1.css'
import '../../assets/css/order/jquery-ui-themes.css'
import '../../assets/css/order/axure_rp_page.css'
import '../../assets/css/order/orderStyle.css'

export default {
	data() {
		return {
			total: 0, // 总记录数
			orderList: [],
			//查询条件
			queryInfo: {
				current: 1,
				size: 5
			},
			//订单状态数量
			statusCount: {},

			//控制发货对话框的显示与隐藏
			dialogVisible: false,
			//收货地址
			mateData: {},
			//修改表单的验证规则对象
			editFormRules: {
				name: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
				phone: [{ required: true, message: '请输入收货人手机号', trigger: 'blur' }],
				address: [{ required: true, message: '请输入收货人地址', trigger: 'blur' }]
			}
		}
	},
	created() {
		this.getOrderList()
		this.getStatusCount()
	},
	methods: {
		viewOrder(){
			this.$router.push('/order/list/details')
		},
		//获取订单分类数据
		async getOrderList() {
			const { data: res } = await this.$http.get('api/service-order/admin/order/list', {
				params: this.queryInfo
			})
			// console.log(res.data)

			if (res.code !== 200) {
				return this.$message.error(res.msg)
			}

			//把数据列表赋值给catelist
			this.orderList = res.data.records
			//为总数据条数赋值
			this.total = res.data.total
			// console.log(this.orderList)

			// console.log(this.productList)
		},

		//获取订单状态数量
		async getStatusCount() {
			const { data: res } = await this.$http.get('api/service-order/admin/order/getByCount')
			// console.log(res.data)

			if (res.code !== 200) {
				return this.$message.error(res.msg)
			}
			this.statusCount = res.data
			// console.log(this.productList)
		},

		//监听 pagesize改变
		handleSizeChange(newSize) {
			this.queryInfo.size = newSize
			this.getOrderList()
		},

		//监听pagenum改变
		handleCurrentChange(newPage) {
			this.queryInfo.current = newPage
			this.getOrderList()
		},

		// 重置表单
		resetData() {
			this.queryInfo = {
				//当前页
				current: 1,
				//当前数量
				size: 5
			}
			this.getOrderList()
		},

		//根据订单状态查询订单记录
		selectByStatus(status) {
			this.queryInfo.status = status
			this.getOrderList()
		},

		//点击按钮，展示发货对话框
		async showDialog(row) {
			this.mateData = row.matedataRsp.map
			this.mateData.orderId = row.id
			//显示当前发货对话框
			this.dialogVisible = true
		},

		//重置修改的表单
		editDialogClosed() {
			this.$refs.editFormRef.resetFields()
		},

		//订单发货
		commit(id) {
			//点击按钮，
			this.$refs.editFormRef.validate(async (valid) => {
				if (!valid) return
				const { data: res } = await this.$http.put(`api/service-order/admin/order/` + id, {
					status: 2
				})

				if (res.code !== 200) {
					return this.$message.error(res.msg)
				}
				this.$message.success('发货成功！')
				this.getOrderList()
				this.dialogVisible = false
			})
		}
	}
}
</script>

<style lang="less" scoped>
.el-container {
	background-color: white !important;
}
.el-table {
	margin-top: 252px;
	margin-left: 15px;
	width: 1162px;
}
.chaxunbiaodan {
	position: absolute;
	top: 195px;
	left: 220px;
	width: 1110px;
}
.el-pagination {
	text-align: center;
}
.anniu {
	margin-top: 61px;
	margin-left: 0px;
}
</style>
